<template>
  <div>
      <el-form label-width="100px">
        <el-form-item label="文章标题：">
          <el-input placeholder="键入标题：" clearable v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：">
          <div id="editor"></div>
        </el-form-item>
        <el-form-item label="文章来源：">
          <el-radio v-model="form.stemfrom" label="原创">原创</el-radio>
          <el-radio v-model="form.stemfrom" label="转载">转载</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="upload">发布文章</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import Editor from 'wangeditor'
export default {
  data(){
    return {
      form:{
        author:this.$store.state.user.username,//🌟
        title:'',
        stemfrom:'',
      },
      editor:null
    }
  },
  methods: {
    upload(){
      const content = this.editor.txt.html()
      const date = new Date().toLocaleString()
      this.$http({
        path:'/article/add',
        method:'post',
        params:{
          id:Date.now(),
          author:this.form.author,
          title:this.form.title,
          stemfrom:this.form.stemfrom,
          content,
          createTime:date,
        }
      }).then(res=>{
        this.$message({
          type:res.code===200?'success':'error',
          message:res.msg
        })
      })
    },

  },
  mounted(){
    this.editor = new Editor("#editor");

    let token;
    try {
      token = JSON.parse(document.cookie.split('=')[1]).token;
    } catch (error) {
      console.error(error);
    }

    //编辑器的配置
    this.editor.config.uploadImgServer = `http://10.9.41.221:7000/upload/editor/img`;
    this.editor.config.uploadFileName = 'editor-file';
    this.editor.config.uploadImgHeaders = {
      authorization:"Bearer " + token
    }
    this.editor.config.placeholder = this.form.author + '✨：开始编辑你的文章👉'

    this.editor.create()
  }
}
</script>

<style>

</style>